<template>
  <div class="app-container">
    <div style="background-color: #fff;font-size:15px; color: #5A5A5A;border-radius: 10px;padding-bottom: 13px;">
      <search-form
        v-if="isInitData"
        :search-form="searchForm"
        :button-group="buttonGroup"
        :model-type="'water'"
        @searchFormEmit="searchFormEmit"
      />
    </div>
    <div v-loading="loading" class="table-2">
      <div style="display: flex;flex-direction: row;justify-content: space-between;align-items:center; background-color: #FAFBFD;padding: 2px 30px;border-radius: 10px 10px 0 0;">
        <div style="color: #404040;padding: 14px 0;">搜索到<span style="color: #F56C6C">超 {{ countcount }} </span>个项目</div>
      </div>
      <div v-if="CompanysList.length" style=" margin-bottom: 2rem;">
        <div v-for="(item, index) in CompanysList" :key="index" :title="item.ProjectName">
          <el-row style="border-bottom: 1px solid #E8E8E8; padding: 30px 30px 10px;" class="hover-row">
            <el-col :span="1">
              <router-link :to="{path: '/project/waterInfo?id='+item.Id}">
                <el-avatar shape="square" :size="50" :style="`background:${extractColorByName(item.ProjectName)}; font-size: 2.2rem;`">{{ item.ProjectInitial }}</el-avatar>
              </router-link>
            </el-col>
            <el-col :span="23">
              <router-link :to="{path: '/project/waterInfo?id='+item.Id}">
                <div style="margin-bottom: 16px;"><span style="margin-right: 20px;">{{ item.ProjectName }}</span></div>
              </router-link>
              <el-descriptions :column="3">
                <el-descriptions-item label="项目类别">{{ item.ProjectType }}</el-descriptions-item><br>
                <el-descriptions-item label="申报单位">{{ item.CompanyName }}</el-descriptions-item>
                <el-descriptions-item label="建设单位">{{ item.BuildCompanyName }}</el-descriptions-item>
                <el-descriptions-item label="项目属地">{{ item.DistFullName }}</el-descriptions-item>
                <el-descriptions-item label="公开日期">{{ item.ProjectPublicTime }}</el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-else style="background-color: #fff;"><el-empty description="暂无数据" /></div>
      <div style="background-color:#fff;border-radius: 0 0 10px 10px;">
        <pagination v-show="total > listQuery.pageSize" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getPageList()" />
      </div>
    </div>
  </div>
</template>
<script>
import { getProjectCount, getProjects } from '@/api/water'
import SearchForm from '@/components/SearchForm/index.vue'
import Pagination from '@/components/BasicTable/Pagination.vue'
import { extractColorByName } from '@/utils'
export default {
  name: 'Water',
  components: { SearchForm, Pagination },
  data() {
    return {
      loading: false,
      searchForm: {
        region: true, //  开启地址
        reset: false, //  重置条件
        title: '筛选',
        fields: [
          {
            show: true,
            type: 'input',
            label: '项目名称',
            labelShow: true,
            name: 'projectName'
          },
          {
            show: true,
            type: 'input',
            label: '建筑单位',
            labelShow: true,
            name: 'buildComName'
          },         
          {
            show: true,
            type: 'region',
            label: '项目属地',
            labelShow: true,
            name: 'distId',
            options: null
          },
          {
            name: 'projectTypeName'
          }
        ]
      },
      tableData: null,
      total: 0, // 分页的总数，但是如果数量大于500，就最多可以看500条数据，页码控制到50页以内可以点击分页
      maxPage: 50, // 最多显示多少页数据
      countcount: 0,
      listQuery: {
        page: 1,
        pageSize: 10
      },
      buttonGroup: {
        expend: true,
        title: '表格筛选',
        size: 'default',
        fields: [
          {
            showButtonGroup: true,
            text: '重置条件',
            icon: '',
            type: 'text',
            callBack: () => {
              this.searchForm.reset = true
            }
          }
        ]
      },
      CompanysList: [],
      p: {},
      isInitData: true,
      distId: '0',
      options: []
    }
  },
  mounted() {
  },
  created() {
    // this.getPageList() // 所有的企业 false代表不是搜索进去
  },
  methods: {
    // 2
    async getComCountCount() {
      this.loading = true
      await getProjectCount(this.listQuery).then((res) => {
        if (res.code === 200) {
          this.countcount = res.data.count

          // 最多展示 this.maxPage 页数据
          this.total = Math.ceil(this.countcount / this.listQuery.pageSize) > this.maxPage ? this.listQuery.pageSize * this.maxPage : this.countcount
        }
        this.loading = false
      })
    },
    // 3
    async getPageList(v) {
      this.listQuery = { ...this.listQuery, ...v ?? {}}
      this.loading = true
      getProjects(this.listQuery).then(async(res) => {
        this.loading = false
        if (res.code === 200) {
          // 再请求一下总数接口
          await this.getComCountCount()

          // 关于分页：全部/重置的时候，按照接口的总数分页，搜索的时候按照搜索的数据分（countcount根据搜索出来的数据变换）。
          this.CompanysList = res.data.pageList
        }
      })
    },
    // 4
    searchFormEmit(v) {
      this.listQuery.page = 1
      this.listQuery = { ...this.listQuery, ...v }
      this.getPageList()
    },
    // 7
    extractColorByName(name) {
      return extractColorByName(name)
    }
  }
}
</script>
<style lang="scss" scoped>
.table-2{
  margin-top: 16px;
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 1rem;
}
::v-deep .el-tabs__active-bar{
  height: 0 !important;
}
::v-deep .el-tabs__nav-wrap::after{
  height: 0 !important;
}
::v-deep .el-tabs__item.is-active{
  background-color: #EBF6FF;
  border-radius: 5px;
}
::v-deep .el-tabs--top .el-tabs__item.is-top{
  padding: 0 20px;
}
.hover-row{
  padding: 30px 30px 0 30px;
  border-radius: 10px;
}
.hover-row:hover{
  background-color: #fafbfd;
}
::v-deep .hover-row:hover .el-descriptions__body{
  background-color: #fafbfd;
}
</style>
